<template>

  <div>
  <el-table
    :data="tableData"
    border
    style="width: 900px">
    <el-table-column
      fixed
      prop="bookId"
      label="书籍编号"
      width="150">
    </el-table-column>
    <el-table-column
      fixed
      prop="bookName"
      label="书籍名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="bookAuthor"
      label="书籍作者"
      width="120">
    </el-table-column>
    <el-table-column
      prop="price"
      label="书籍价格"
      width="120">
    </el-table-column>

    <el-table-column
      prop="address"
      label="书籍出版社"
      width="120">
    </el-table-column>

    <el-table-column
      prop="impression"
      label="印刷次数"
      width="120">
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
        <el-button @click="deletebook(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="6"
      :total="total"

     @current-change="page">
    </el-pagination>

  </div>
</template>

<script>
  export default {
    methods: {
      deletebook(row){
        const _this=this
        axios.delete('http://localhost:8181/book/deleteById/'+row.bookId).then(function (resp) {
          _this.$alert('删除成功', '消息', {
            confirmButtonText: '确定',
            callback: action => {
              // _this.$router.push('/page1')
              window.location.reload()
            }
          });
        })

      },
      edit(row) {
        this.$router.push({
          path:'/bookupdate',
          query:{
            id:row.bookId
          }
        })
      },
      page(currentPage){
        const _this = this
        axios.get('http://localhost:8181/book/findAll/'+currentPage+'/6').then(function (resp) {
          _this.tableData = resp.data.books
          _this.total = resp.data.totals
        })
      }
    },
    created(){
      const _this = this
      axios.get('http://localhost:8181/book/findAll/1/6').then(function (resp) {
         _this.tableData = resp.data.books
        _this.total = resp.data.totals
      })
    },
    data() {
      return {
        total:null,
        tableData: []
      }
    }
  }
</script>
